<template>
  <div class="page">
    <div class="mainDiv">
      <div class="header">
        <div class="menu-list">
          <a href="javascript:;" class="item">首页</a>
          <a href="javascript:;" class="item active">三无救助</a>
          <a href="javascript:;" class="item">特殊生活补贴</a>
          <a href="javascript:;" class="item">精神病医疗救助</a>
        </div>
        <div class="title">
          <img src="../../static/logo.png" alt="" />
        </div>
        <div class="menu-list">
          <a href="javascript:;" class="item">通讯补贴</a>
          <a href="javascript:;" class="item">两项补贴</a>
          <a href="javascript:;" class="item">残疾儿童救助</a>
          <a href="javascript:;" class="item">个人档案</a>
          <el-select v-model="formInline.region9" placeholder="更多" style="width:150px;">
          <el-option label="义务教育补助" value="shanghai"></el-option>
          <el-option label="高中及中等专科学校补助" value="beijing"></el-option>
        </el-select>
        </div>
      </div>
      <div class="contentWrap">
        <div class="grleft">
          <el-input v-model="sfzinput" placeholder="请输入内容"></el-input>
          <el-button type="primary">默认按钮</el-button>

          <div class="result">
            <p class="item">410201154545454544</p>
            <p class="item">410201154545454544</p>
          </div>
        </div>
        <div class="grcenter">
          <el-row :gutter="24">
            <el-col :span="12">
                <jibenxinxi></jibenxinxi>
            </el-col>
            <el-col :span="12">
              <div class="map">地图</div>
            </el-col>
          </el-row>
          <el-row :gutter="24">
            <el-col :span="8">
                <canjixinxi></canjixinxi>
            </el-col>
            <el-col :span="8">
                <jianhuxinxi></jianhuxinxi>
            </el-col>
            <el-col :span="8">
                <kuozhanxinxi></kuozhanxinxi>
            </el-col>
          </el-row>
           <el-row :gutter="24">
            <el-col :span="16">
                <fuwuxinxi></fuwuxinxi>
            </el-col>
            <el-col :span="8">
                <jiuyexinxi></jiuyexinxi>
            </el-col>
          </el-row>
        </div>
       
      </div>
    </div>


  </div>
</template>

<script>

import jibenxinxi from "@/components/gerendangan/jibenxinxi";
import canjixinxi from "@/components/gerendangan/canjixinxi";
import jianhuxinxi from "@/components/gerendangan/jianhuxinxi";
import kuozhanxinxi from "@/components/gerendangan/kuozhanxinxi";
import fuwuxinxi from "@/components/gerendangan/fuwuxinxi";
import jiuyexinxi from "@/components/gerendangan/jiuyexinxi";


export default {
  name: "gerendangan",
  components: {
    jibenxinxi,
    canjixinxi,
    jianhuxinxi,
    kuozhanxinxi,
    fuwuxinxi,
    jiuyexinxi
  },
  data() {
    return {
      sfzinput:'',
      visible1:false, //控制社区显示弹窗
      visible2:false, //控制残疾人数显示弹窗
      showSq:'',
      showSelectArea:false,
      currentPage1: 5,
      currentPage2: 5,
      currentPage3: 5,
      currentPage4: 4,
      dialogVisible: false, //查看项目弹窗
      dialogVisible1: false, //查看街道数据弹窗
      dialogVisible2: false, //查看政策文件弹窗
      dialogVisible3: false, //查看社区数据弹窗
      dialogVisible4: false, //查看人员名单弹窗
      dialogVisible5: false, //社区名单弹窗

      time1: "",
      data: [
        {
          label: "金水区",
          children: [
            {
              label: "文化路街道",
              children: [
                {
                  label: "农大社区",
                },
                {
                  label: "郑大工学院社区",
                },
                {
                  label: "郑花路社区",
                },
                {
                  label: "博物馆社区",
                },
              ],
            },
            {
              label: "南阳新村街道",
            },
            {
              label: "经八路街道",
            },
          ],
        },
      ],
      tableData: [
        {
          xmname: "“三无残疾人”生活救助",
          num1: "32",
          num2: "12",
          num3: "9",
          num4: "6",
          num5: "2",
          num6: "1",
        },
        {
          xmname: "特殊生活补贴",
          num1: "32",
          num2: "12",
          num3: "9",
          num4: "6",
          num5: "2",
          num6: "1",
        },
        {
          xmname: "残疾人托养服务",
          num1: "32",
          num2: "12",
          num3: "9",
          num4: "6",
          num5: "2",
          num6: "1",
        },
        {
          xmname: "困难残疾人生活补贴",
          num1: "32",
          num2: "12",
          num3: "9",
          num4: "6",
          num5: "2",
          num6: "1",
        },
        {
          xmname: "重度残疾人护理补贴",
          num1: "32",
          num2: "12",
          num3: "9",
          num4: "6",
          num5: "2",
          num6: "1",
        },
        {
          xmname: "残疾儿童康复救助",
          num1: "32",
          num2: "12",
          num3: "9",
          num4: "6",
          num5: "2",
          num6: "1",
        },
        {
          xmname: "低保家庭精神病患者医疗救助",
          num1: "32",
          num2: "12",
          num3: "9",
          num4: "6",
          num5: "2",
          num6: "1",
        },
        {
          xmname: "绿城通关爱IC卡",
          num1: "32",
          num2: "12",
          num3: "9",
          num4: "6",
          num5: "2",
          num6: "1",
        },
        {
          xmname: "残疾人机动轮椅车燃油补贴",
          num1: "32",
          num2: "12",
          num3: "9",
          num4: "6",
          num5: "2",
          num6: "1",
        },
        {
          xmname: "通讯信息消费补贴",
          num1: "32",
          num2: "12",
          num3: "9",
          num4: "6",
          num5: "2",
          num6: "1",
        },
        {
          xmname: "严重精神障碍患者监护人奖金",
          num1: "32",
          num2: "12",
          num3: "9",
          num4: "6",
          num5: "2",
          num6: "1",
        },
      ],
      //项目街道数据
      xmData: [
        {
          xmname: "经八路街道",
          num1: "32",
          num2: "12",
          num3: "9",
          num4: "6",
          num5: "2",
          num6: "1",
        },
        {
          xmname: "花园路街道",
          num1: "32",
          num2: "12",
          num3: "9",
          num4: "6",
          num5: "2",
          num6: "1",
        },
        {
          xmname: "人民路街道",
          num1: "32",
          num2: "12",
          num3: "9",
          num4: "6",
          num5: "2",
          num6: "1",
        },
        {
          xmname: "杜岭街道",
          num1: "32",
          num2: "12",
          num3: "9",
          num4: "6",
          num5: "2",
          num6: "1",
        },
        {
          xmname: "经八路街道",
          num1: "32",
          num2: "12",
          num3: "9",
          num4: "6",
          num5: "2",
          num6: "1",
        },
        {
          xmname: "花园路街道",
          num1: "32",
          num2: "12",
          num3: "9",
          num4: "6",
          num5: "2",
          num6: "1",
        },
        {
          xmname: "人民路街道",
          num1: "32",
          num2: "12",
          num3: "9",
          num4: "6",
          num5: "2",
          num6: "1",
        },
        {
          xmname: "杜岭街道",
          num1: "32",
          num2: "12",
          num3: "9",
          num4: "6",
          num5: "2",
          num6: "1",
        },
        {
          xmname: "经八路街道",
          num1: "32",
          num2: "12",
          num3: "9",
          num4: "6",
          num5: "2",
          num6: "1",
        },
        {
          xmname: "花园路街道",
          num1: "32",
          num2: "12",
          num3: "9",
          num4: "6",
          num5: "2",
          num6: "1",
        },
        {
          xmname: "人民路街道",
          num1: "32",
          num2: "12",
          num3: "9",
          num4: "6",
          num5: "2",
          num6: "1",
        },
        {
          xmname: "杜岭街道",
          num1: "32",
          num2: "12",
          num3: "9",
          num4: "6",
          num5: "2",
          num6: "1",
        },
      ],
      //社区街道数据
      sqData: [
        {
          xmname: "体育社区",
          num1: "32",
          num2: "12",
          num3: "9",
          num4: "6",
          num5: "2",
          num6: "1",
        },
        {
          xmname: "任寨社区",
          num1: "32",
          num2: "12",
          num3: "9",
          num4: "6",
          num5: "2",
          num6: "1",
        }
      ],
      //人员名单数据
      renyuanData: [
        {
          jiedao: "经八路街道",
          shequ: "体育社区",
          xingming: "丁心爱",
          xingbie: "女",
          canjizhenghao: "410000000000000000",
          minzu: "汉族",
          canjileibie: "肢体残疾",
          canjidengji: "一级",
          wenhuachengdu: "专科",
          hukouleixing: "非农业",
          lianxidianhua: "18037101111",
          jiadingzhuzhi: "郑州市金水区同乐路3号院1号楼14号",
        },
        {
          jiedao: "经八路街道",
          shequ: "体育社区",
          xingming: "丁心爱",
          xingbie: "女",
          canjizhenghao: "410000000000000000",
          minzu: "汉族",
          canjileibie: "肢体残疾",
          canjidengji: "一级",
          wenhuachengdu: "专科",
          hukouleixing: "非农业",
          lianxidianhua: "18037101111",
          jiadingzhuzhi: "郑州市金水区同乐路3号院1号楼14号",
        },
         {
          jiedao: "经八路街道",
          shequ: "体育社区",
          xingming: "丁心爱",
          xingbie: "女",
          canjizhenghao: "410000000000000000",
          minzu: "汉族",
          canjileibie: "肢体残疾",
          canjidengji: "一级",
          wenhuachengdu: "专科",
          hukouleixing: "非农业",
          lianxidianhua: "18037101111",
          jiadingzhuzhi: "郑州市金水区同乐路3号院1号楼14号",
        },
         {
          jiedao: "经八路街道",
          shequ: "体育社区",
          xingming: "丁心爱",
          xingbie: "女",
          canjizhenghao: "410000000000000000",
          minzu: "汉族",
          canjileibie: "肢体残疾",
          canjidengji: "一级",
          wenhuachengdu: "专科",
          hukouleixing: "非农业",
          lianxidianhua: "18037101111",
          jiadingzhuzhi: "郑州市金水区同乐路3号院1号楼14号",
        },
         {
          jiedao: "经八路街道",
          shequ: "体育社区",
          xingming: "丁心爱",
          xingbie: "女",
          canjizhenghao: "410000000000000000",
          minzu: "汉族",
          canjileibie: "肢体残疾",
          canjidengji: "一级",
          wenhuachengdu: "专科",
          hukouleixing: "非农业",
          lianxidianhua: "18037101111",
          jiadingzhuzhi: "郑州市金水区同乐路3号院1号楼14号",
        },
         {
          jiedao: "经八路街道",
          shequ: "体育社区",
          xingming: "丁心爱",
          xingbie: "女",
          canjizhenghao: "410000000000000000",
          minzu: "汉族",
          canjileibie: "肢体残疾",
          canjidengji: "一级",
          wenhuachengdu: "专科",
          hukouleixing: "非农业",
          lianxidianhua: "18037101111",
          jiadingzhuzhi: "郑州市金水区同乐路3号院1号楼14号",
        }
      ],
      //享受标准数据
      xiangshoubiaozhunData: [
        {
          index: "1",
          text: "无劳动能力",
        },
        {
          index: "2",
          text: "无生活来源",
        },
        {
          index: "3",
          text: "分散供养",
        },
        {
          index: "4",
          text: "无监护人或监护人无劳动能力无生活来源",
        },
      ],
      //解除条件数据
      jiechutiaojianData: [
        {
          index: "1",
          text: "亡故",
        },
        {
          index: "2",
          text: "有劳动能力",
        },
        {
          index: "3",
          text: "有经济来源",
        },
        {
          index: "4",
          text: "有法定抚养人或赡养人",
        },
        {
          index: "5",
          text: "其他",
        }
      ],
      //相关材料打印
      xiangguancailiaoData: [
        {
          index: "1",
          text: "“三无残疾人”生活救助申请审批表",
        },
        {
          index: "2",
          text: "“三无残疾人”解除生活救助审批表",
        }
      ],
      defaultProps: {
        children: "children",
        label: "label",
      },
       formInline: {
          user: '',
          region1: '',
          region2: '',
          region3: '',
          region4: '',
          region5: '',
          region6: '',
          region7: '',
          region8: '',
          region9: ''
        },
      showZcfw: "0",
      showsJiedaoTitle: "",
      showShequTitle:"",
      curXiangmu:'',
      curJiedao:'',
      curShequ:''
    };
  },
  computed: {
    // 默认时间
    timeDefault() {
      var date = new Date();
      var s1 =
        date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate();
      return s1;
    },
  },
  created() {
    this.time = this.timeDefault;
  },
  methods: {
    //社区人数
    handelShequDialog(){
      this.visible1 = true
    },
    handleCancel (){
      console.log('社区')
      this.visible1 = false
    },
    //残疾人数
    canjirenshuDialog(){
      this.visible2 = true
    },
    handleCancel2(){
       console.log('残疾人')
      this.visible2 = false
    },
    handleshowSelectArea(){
      this.showSelectArea=true?this.showSelectArea=false:this.showSelectArea=true;
    },
     handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
      },
    // handleClose(done) {
    //   this.$confirm("确认关闭？")
    //     .then((_) => {
    //       done();
    //     })
    //     .catch((_) => {});
    // },
    //查看政策文件
    showZcwj() {},
    //项目点击查看街道
    showsJiedao(row) {
      console.log(row.xmname);
      this.dialogVisible1 = true;
      this.showsJiedaoTitle = "金水区" + row.xmname + "统计表";
      this.curXiangmu = row.xmname;
    },
    //街道点击查看社区
    showShequ(row){
      this.dialogVisible3 = true;
      this.showShequTitle = row.xmname+ this.curXiangmu + "统计表";
    },
    //人员点击查看弹窗
    showsRenyuan(row){
      this.dialogVisible4 = true;
      this.showShequTitle = row.xmname+ this.curXiangmu + "统计表";
    },
    //查看政策弹窗
    showZc() {
      this.dialogVisible2 = true;
    },
    //人数页面提交查询条件
    onSubmit() {
      console.log('submit!');
    },
    indexMethod(index) {
      return index + 1;
    },
    clickDay(data) {
      console.log(data); //选中某天
    },
    changeDate(data) {
      console.log(data); //左右点击切换月份
    },
    clickToday(data) {
      console.log(data); //跳到了本月
    },
    //选择区域
    handleNodeClick() {},
    //选择服务
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.page {
  width: 100%;
  height: 100%;
  background: #fffaf2;
  background-size: 100% 100%;
}
.mainDiv {
  width: 100%;
  height: 100%;
  /* background:url(/static/mengban.png) no-repeat center center; */
  background-size: 100% 100%;
  display: flex;
  flex-flow: column;
}

.header {
  width: 100%;
  height: 130px;
  background: url(/static/headbg.png) no-repeat center 40px;
  background-size: 100% auto;
  display: flex;
  justify-content: space-between;
  align-content: center;
  justify-items: center;
  padding-top: 40px;
}
.title {
  color: #fff;
  height: 56px;
  line-height: 56px;
}

.menu-list {
  padding: 0 20px;
  margin-top: 20px;
}
.menu-list .item {
  color: #a6803b;
  font-weight: bold;
  display: inline-block;
  padding: 0 10px;
  text-align: center;
  height: 50px;
  position: relative;
  line-height: 50px;
  box-sizing: border-box;
  border-radius: 5px;
}
.select-item {
  display: inline-block;
  padding: 0 20px;
  text-align: center;
  height: 30px;
  position: relative;
  line-height: 30px;
  box-sizing: border-box;
  border-radius: 5px;
}
.menu-list .active {
  border-bottom: 4px solid #4b8df8;
 
}

.contentWrap {
  flex: 1;
  width: 100%;
  letter-spacing: 1px;
  display: flex;
  justify-content: space-between;
  margin-top: 5px;
}
.grleft{
  width:30%;
}
.grcenter{
  width:70%;
}

.grleft,.grcenter,.grright{
  padding: 0 1%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: top;
  justify-content: flex-start;
}
.conLeft,
.conRight {
  width: 25%;
  padding: 0 1%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: top;
  justify-content: flex-start;
}
.conLeft > div,
.conRight > div,
.conCenter > div,
.conRight > div {
  width: 100%;
  display: block;
}

/* 中间的分类样式 */
.box-list{
   display: flex;
   justify-content: space-between;
 }
 .box{
  width: 220px;
  height:180px;
  background: url(../../static/panelbox.png) no-repeat;
  text-align: center;
  background-size:100% auto;
  color:#fff;
 }
  .box .text{
    padding:20px 0;
  }
 .box .text span{
   font-size:16px;
   border-radius: 8px;
   padding:5px 50px;
   background: -webkit-linear-gradient(left,#006ae1,#16b7ff);
   background: -webkit-linear-gradient(left,#006ae1,#16b7ff);
		background: -o-linear-gradient(left,#006ae1,#16b7ff);
		background: -moz-linear-gradient(left,#006ae1,#16b7ff);
		background: -mos-linear-gradient(left,#006ae1,#16b7ff);
		background: linear-gradient(left,#006ae1,#16b7ff);
   
 }
 .box .num{
   font-size:32px;
    color:#58dbff;
 }

.handle {
  display: flex;
  justify-content: space-between;
}
.handle .ico {
  width: 30px;
  height: 30px;
}
.handle .text {
  color: #58dbff;
  font-size: 14px;
}

.handle .select-area,
.handle .fuwuhuizong {
  float: left;
  padding: 5px 20px 20px 0;
}

.handle2 {
  display: flex;
  justify-content: space-between;
  width: 100%;
}
.handle2 .ico {
  width: 30px;
  height: 30px;
}
.handle2 .text {
  color: #58dbff;
  font-size: 14px;
}

.handle2 .select-time {
  position: relative;
  padding: 5px 20px 20px 0;
  width: 100%;
}
.handle2 .select-time .time-tip {
  position: absolute;
  width: 100%;
  direction: block;
  left: 0;
  top: 30px;
}
.conCenter {
  width: 47%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: top;
  justify-content: flex-start;
}

.canjileibie {
  height: 40%;
}
.canjidengji {
  height: 40%;
}

.catenav {
  height: 20%;
}
.areamap {
  height: 40%;
}
.gedifenbu {
  height: 30%;
}

.fuwurenshu {
  height: 50%;
}
.jiuyeleixing {
  height: 50%;
}
.select-area {
  position: relative;
}
.select-wrap {
  position: absolute;
  width: 200px;

  background: #fff;
  padding: 20px 0;
  top: 40px;
  z-index: 66;
}
/*政策服务享受情况统计汇总表*/
.shuoming-handel {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}
.shuoming-handel2 {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 20px;
}
.shuoming .smtitle {
  color: #666;
  font-size: 16px;
  padding: 20px 0 10px;
}
.shuoming p {
  font-size: 12px;
  color: #444;
  line-height: 22px;
}
.shuoming p.red {
  color: rgb(173, 46, 46);
}
.zctitle{
  font-size:16px;
  font-weight: bold;
  padding:15px 0;
}
.zcdetail{
  font-size: 14px;
  color: #888;
  padding:10px 0;
}
.zcdetail .red{
  color: rgb(173, 46, 46);
}
</style>
